<template>
    <van-nav-bar
        title="确认订单"
        left-text="返回"
        left-arrow
        @click-left="back"
    />

    <!-- 收货地址 -->
    <van-contact-card v-if="address"  type="edit" :tel="address.tel" :name="address.name" @click="ToggleAddress"/>
    <van-contact-card v-else type="add" add-text="添加地址" @click="AddressAdd" />

    <!-- 购物车列表 -->
    <div class="cart-confirm" v-for="cart in cartlist">
        <!-- 商品卡片 -->
        <van-card
            class="goods-card"
            :title="cart.product.name"
            :price="cart.total"
            :thumb="cart.product.thumb_text"
            :num="cart.nums"
        >
            <template #desc>
                <div style="color: #969799">库存：{{ cart.product.stock }}</div>
                <div>单价：{{ cart.price }}</div>
            </template>
        </van-card>
    </div>

    <!-- 订单备注 -->
    <van-cell-group inset>
        <van-field
            v-model="remark"
            rows="2"
            autosize
            type="textarea"
            maxlength="100"
            placeholder="请输入订单备注"
            show-word-limit        
        />
    </van-cell-group>

    <!-- 提交订单栏 -->
    <van-submit-bar :price="price" button-text="立即下单" @submit="submit" />

</template>

<script setup>
    import {getCurrentInstance} from 'vue'  
    const {proxy}  = getCurrentInstance()

    // 接收要下单的购物车id
    var ids = proxy.$route.query.ids ? proxy.$route.query.ids : ''
    ids = ref(ids)

    console.log(ids.value);
    // 获取收获地址信息
    let address = proxy.$cookies.get('address') ? proxy.$cookies.get('address') : ''
    address = ref(address)

    // 获取用户信息
    let business = reactive(proxy.$cookies.get('business'))

    let cartlist = ref([])
    let remark = ref('')

    let price = computed(() => {
        var total = 0;

        cartlist.value.map(item => {
            //合算
            total += parseFloat(item.total)
        })

        return parseFloat(total*100);
    })

    // 钩子函数
    onBeforeMount(() => {
        CartData()
        AddressData()
    })

    // 接口请求
    let CartData = async () => {
        var data = {
            busid: business.id,
            ids: ids.value
        }

        var result = await proxy.$POST({
            url: '/cart/index',
            params: data
        })
        
        if(result.code == 0){
            proxy.$fail(result.msg)
            cartlist.value = []
            return false
        }

        cartlist.value = result.data
    }

    // 获取收货地址
    let AddressData = async () => {
        // 当收货地址为空时去请求
        if(address.value){
            return false
        }

        // 组装数据
        var data = {
            busid: business.id
        }

        var result = await proxy.$POST({
            url: '/cart/address',
            params: data
        })

        if(result.code == 0){
            proxy.$fail(result.msg)
            return false
        }

        address.value = {
            tel: `${result.data.mobile}(${result.data.consignee})`,
            name:`${result.data.region_text} ${result.data.address}`,
            id: result.data.id
        }
    }

    // 添加收货地址
    let AddressAdd = () => {
        proxy.$router.push('/address/add')
        return false
    }

    // 切换收货地址
    let ToggleAddress = () => {
        proxy.$router.push({
            path:'/address/index',
            query:{action:'toggle'}
        })
    }

    // 提交订单 -> 结算界面
    let submit = async () => 
    {
        proxy.$confirm({
            title: '下单提醒',
            message: '是否确认立即下单'
        }).then(async () => {
            // 组装数据
            var data = {
                cartids: ids.value,
                busid: business.id,
                addrid: address.value.id,
                remark: remark.value
            }

            // 发起请求
            var result = await proxy.$POST({
                url: '/order/add',
                params: data
            })


            if(result.code == 0){
                proxy.$fail(result.msg)
                return false
            }else{
                proxy.$success(result.msg)
                proxy.$router.push(result.url)
                return false
            }
        }).catch(err => {})
    }

    const back = () => {
        proxy.$router.go(-1)
        return false
    }
</script>

<style>
    .cart-confirm {
      display: block;
      width: 100%;
      background: var(--van-card-background);
    }
</style>